<template>
  <div class="container">
    <my-header
      ref="header"
      :isBack="showFilterDialog || showTurn ? true : false"
      :backText="showTurn ? '点巡检转办' : '点巡检筛选'"
      :ewm="showFilterDialog || showTurn ? false : true"
      :filter="showFilterDialog || showTurn ? false : true"
      :is_Level_three_page="showFilterDialog ? true : false"
      :hadInput="hadInput"
      @filterFn="goFilter"
      @backFn="back"
      @saoMa="scanAdd"
      @getIsFilterBackHome="getIsFilterBackHome"
    ></my-header>

    <Application> </Application>
    <div class="my_dialog" :style="{ top: headerHeight + 'px' }">
      <transition name="slide">
        <div v-show="showFilterDialog">
          <div v-if="isRefreshCheckComponent">
            <check-filter
              ref="checkFilter"
              :index="index"
              :checkSecondTabIndex="checkSecondTabIndex"
              :replaceSecondTabIndex="replaceSecondTabIndex"
              :departmentId="departmentId"
              :offsetTop="headerHeight"
              :isFilterBackHome="isFilterBackHome"
              @initHadInput="initHadInput"
              @coloseFilterDialog="coloseFilterDialog"
              @changeRefrehCheckComponent="changeIsRefreshCheckComponent"
              @changeFilterCondition="changeFilterCondition"
              @againResetMeScrollChild="againResetMeScrollChild"
            ></check-filter>
          </div>
        </div>
      </transition>
      <transition name="slide">
        <div v-show="showTurn">
          <div v-if="isRefreshSelectComponent">
            <select-person
              :offsetTop="headerHeight"
              selectTitle="选择转办人"
              :turnCheckId="turnCheckId"
              :workSheetType="turnType"
              @closeSelectPersonFn="closeTurnFn"
              @changeIsRefreshSelectComponent="changeIsRefreshSelectComponent"
              @resetUpScroll="resetMeScrollChild"
            ></select-person>
          </div>
        </div>
      </transition>
    </div>
    <div class="body-wrapper">
      <div class="fixed_dep_box">
        <div class="btn_box">
          <div
            class="department_select"
            :class="showTree ? 'active' : ''"
            @click="showTreeFn(true)"
          >
            <p class="department_name">{{ curDepartment.departmentName }}</p>
            <iconSvg
              name="downFill"
              w="23px"
              height="13px"
              class="selece_icon"
              ref="selece_icon"
            ></iconSvg>
          </div>
          <transition name="slide">
            <div class="dep_box" v-show="showTree">
              <dep-tree
                ref="depTree"
                @changeId="change"
                @showTreeFn="showTreeFn"
                @initCurDepartment="initCurDepartment"
                :initDepartment="curDepartment"
              ></dep-tree>
            </div>
          </transition>
          <button class="toggle" @click="toggleFn">
            {{ isOpen ? "收起图表" : "展开图表" }}
            <iconSvg
              class="btn_icon"
              :name="isOpen ? 'close' : 'open'"
              w="28px"
              h="16px"
            ></iconSvg>
          </button>
        </div>
        <div
          v-if="showTree"
          @click="showTreeFn(false)"
          style="position: fixed;top: 0;left:0; width: 100vw;height: 100vh; z-index: 9"
        ></div>

      </div>

      <div class="chart" v-show="isOpen">
        <!--  <spinner class="loading" v-if="replaceRecordMonth.length == 0" type="ripple" size="50px"></spinner> -->
        <div id="myChart" ref="chart"></div>
        <!-- <chart-list :chart-list="chartList" :show-title="false"></chart-list> -->
        <div class="chart_empty" v-if="show_chart_empty">
          <img src="/static/img/chart_empty.png" />
          <p>暂无相关数据</p>
        </div>
        <loading
          class="loading"
          :inline="true"
          :size="50"
          tip="刷新中..."
          v-if="recordLoading"
        />
      </div>
      <div class="tab_box">
        <sticky
          v-if="!isdestory"
          scroll-box="mescroll"
          ref="sticky"
          :offset="0"
          :check-sticky-support="false"
        >
          <!-- /operaionManage/spotCheck/checkAndReplaceSetList -->
          <div class="tab_top_nav">
            <tab
              :line-width="3"
              :animate="false"
              active-color="#456de6"
              default-color="#fff"
              custom-bar-width="20px"
              v-model="index"
            >
              <tab-item selected @on-item-click="switchFn">点巡检</tab-item>
              <tab-item @on-item-click="switchFn">更换</tab-item>
            </tab>
          </div>
          <div class="tab-nav" v-if="index == 0">
            <div
              class="tab-nav-item"
              :class="{ active: checkSecondTabIndex == 1 }"
              @click="spotCheckView(1)"
            >
              <span>{{ spotCheckNum1 }}</span>
              <span>
                可执行
              </span>
            </div>
            <div
              class="tab-nav-item"
              :class="{ active: checkSecondTabIndex == 2 }"
              @click="spotCheckView(2)"
            >
              <span>{{ spotCheckNum2 }}</span>
              <span>
                已完成
              </span>
            </div>
            <div
              class="tab-nav-item overdue"
              :class="{ active: checkSecondTabIndex == 3 }"
              @click="spotCheckView(3)"
            >
              <span>{{ spotCheckNum3 }}</span>
              <span>
                逾期未处理
              </span>
            </div>
          </div>
        </sticky>
      </div>
    </div>
    <div id="mescroll" ref="mescroll" class="mescrollParent" v-if="index == 0">
      <div class="tab_list_box first_tab">
        <div class="list_content">
          <loading
            :inline="false"
            :size="32"
            tip="加载中..."
            :reload="reload"
            @reloadFn="upCallback"
            v-if="showRefresh"
          />
          <div class="pause-btn">
            <div
              class="btn"
              @click="eventStopStepShow"
              v-if="
                checkSecondTabIndex === 1 &&
                  dataList1.length &&
                  privilege('wechat_operaionManage','wechat_operaionManage:stop_plan')
              "
            >
              暂停计划
            </div>
            <div
              class="btn"
              v-if="
                checkSecondTabIndex === 3 &&
                  isLastLevel &&
                  dataList3.length &&
                  privilege('wechat_operaionManage','wechat_operaionManage:overdue_list_mange')
              "
              @click="eventOverdueHandle(dataList3, 1)"
            >
              批量处理
            </div>
          </div>
          <ul>
            <list-card
              v-for="(item, itemIndex) in tableData"
              :key="itemIndex"
              :listItemData="item"
              :viewType="checkSecondTabIndex"
              :showOverdue="showOverdueIndex === itemIndex"
              :departmentName="curDepartment.departmentName"
              :isLastLevel="isLastLevel"
              :showMore="!!item.showMore"
              @eventOverdueHandle="eventOverdueHandle"
              @eventChangeOverdueIndex="eventChangeOverdueIndex(itemIndex)"
              @eventOpenNext="eventOpenNext(item)"
              @eventChlid="showOverdueIndex = null"
              @eventPageNext="eventPageNext(item)"
              ref="listcardCheck"
            ></list-card>
          </ul>
          <div class="mescroll-empty" v-if="showEmpty">
            <img class="empty-icon" src="/static/img/zwlr-icon.png" />
            <p class="empty-tip">暂无内容</p>
          </div>
          <div class="newpage_work_more" v-if="showMore" @click="getMore">
            查看更多
          </div>
        </div>
      </div>
      <button
        class="ewm"
        v-if="user && user.admin != 5"
        @touchstart="handleTouchstart"
        @touchmove.stop="move"
        @touchend="handleTouchend"
        @click="scanAdd"
      >
        扫一扫
      </button>
      <div
        @touchmove.stop="maskTouchMove"
        v-if="isbound"
        style="position: fixed;top: 0;left:0; width: 100vw;height: 100vh; z-index: 999"
      ></div>
    </div>
    <replace-list
      v-if="index == 1"
      :navIndex="index"
      :curDepartment="curDepartment"
      @eventOpenNext="eventOpenNext"
    ></replace-list>
    <div v-transfer-dom>
      <confirm
        v-model="stopStepDialog"
        title="暂停计划"
        :close-on-confirm="false"
        @on-cancel="handleStopStep(0)"
        @on-confirm="handleStopStep(1)"
        class="stopstep-handle-confirm"
      >
        <div class="searchItem">
          <div class="inner">
            <span>选择部门：</span>
            <div class="curSelectItem">
              <div class="department_box">
                <div
                  class="department_select"
                  :class="stopStepShowTree ? 'active' : ''"
                  @click="stopStepDepShowTreeFn(true)"
                >
                  <p class="department_name">
                    {{ stopStepShowTreeDepartment.departmentName }}
                  </p>
                  <iconSvg
                    name="downFill"
                    w="23px"
                    height="13px"
                    class="selece_icon"
                    ref="selece_icon"
                  ></iconSvg>
                </div>
                <transition name="slide">
                  <div class="dep_box" v-show="stopStepShowTree">
                    <dep-tree
                      v-if="stopStepShowTreeDepartment.departmentName"
                      @changeId="stopStepDepChange"
                      @showTreeFn="stopStepDepShowTreeFn"
                      :initDepartment="stopStepShowTreeDepartment"
                    ></dep-tree>
                  </div>
                </transition>
              </div>
            </div>
          </div>
          <div class="inner">
            <span>暂停时间：</span>
            <div class="time">
              <div class="time-span" @click="selectTime(0)">
                {{
                  (stopStepForm.startTime &&
                    stopStepForm.startTime.format("YYYY.MM.DD HH:mm")) ||
                    "&nbsp;"
                }}
              </div>
              <div class="time-text">至</div>
              <div class="time-span" @click="selectTime(1)">
                {{
                  (stopStepForm.endTime &&
                    stopStepForm.endTime.format("YYYY.MM.DD HH:mm")) ||
                    "&nbsp;"
                }}
              </div>
            </div>
          </div>
          <div class="inner">
            <span>暂停原因：</span>
            <x-textarea
              v-model="stopStepForm.remark"
              class="textarea"
              :max="200"
              name="description"
            ></x-textarea>
          </div>
        </div>
      </confirm>
    </div>

    <div v-transfer-dom>
      <confirm
        v-model="overdueHandleDialog"
        :title="batchTag ? '批量处理' : '逾期处理'"
        :close-on-confirm="false"
        @on-cancel="handleOverdueHandle(0)"
        @on-confirm="handleOverdueHandle(1)"
        class="overdue-handle-confirm"
      >
        <div class="searchItem">
          <div class="inner">
            <span><span style="color:#ff2c2c">*</span>逾期原因：</span>
            <select
              class="iu-select"
              placeholder="请选择逾期原因"
              v-model="overdueHandleForm.overdueDisposeReson"
              required
            >
              <option disabled selected hidden value>- 请选择逾期原因</option>
              <option v-for="item in reasonList" :value="item" :key="item">
                {{ item }}
              </option>
            </select>
          </div>
          <div class="inner">
            <span>责任人：</span>
            <select
              class="iu-select"
              v-model="overdueHandleForm.overdueLeaderUserId"
              required
            >
              <option disabled selected hidden value>- 请选择责任人</option>
              <option
                v-for="item in personList"
                :value="item.id"
                :key="item.id"
              >
                {{ item.name }}
              </option>
            </select>
          </div>
          <div class="inner">
            <span> <span style="color:#ff2c2c">*</span>处理描述： </span>
            <x-textarea
              v-model="overdueHandleForm.overdueDisposeDesc"
              class="textarea"
              :max="200"
              name="description"
            ></x-textarea>
          </div>
          <div
            class="title"
            @click="
              overdueHandleForm.isWorkSheet = overdueHandleForm.isWorkSheet
                ? null
                : 1
            "
          >
            <x-icon
              v-if="!overdueHandleForm.isWorkSheet"
              type="ios-circle-outline"
              size="18"
              fill="#999"
            ></x-icon>
            <x-icon
              v-else-if="overdueHandleForm.isWorkSheet"
              type="ios-circle-filled"
              size="18"
              fill="#333"
            ></x-icon>
            <span style="margin-left:4px">
              是否需要重新巡检，并生成巡检工单
            </span>
          </div>
        </div>
      </confirm>
    </div>
  </div>
</template>

<script>
import {
  Tab,
  TabItem,
  Sticky,
  TransferDom,
  XDialog,
  XButton,
  XTextarea,
  Confirm
} from "vux";
// const echarts = require('echarts');
// import request from "../../config/request.js";
// import MeScroll from "mescroll.js/mescroll.vue";
import loading from "@/components/common/loading";
import myHeader from "@/components/common/header";
import depTree from "@/components/common/tree";
import listCard from "@/components/common/listCard";
// import replaceListCard from "@/components/common/replace/replaceListCard";
import replaceList from "@/components/pages/replace/replaceList";
import checkFilter from "@/components/common/check_filter";
import selectPerson from "@/components/common/select/selectPerson";
import Application from "@/components/common/application";
import { isEmptyObject } from "@/utils/index";
import SpotCheckDao from "@/daos/spotCheckDao";
import Common from "@/config/commom";
import dayjs from "dayjs";
import { Privilege } from "@/mixin";
import ChartList from "@/components/common/chart_list/index";
import DataAnalysisDao from "@/daos/data_analysis_dao";

let _this = null;
const defaultFilterCondition = {
  checkLeaderName: "",
  deviceComponentName: "",
  deviceComponentCode: "",
  checkTypeList: [],
  statusList: [],
  departmentId: "",
  deviceTypeId: null
};
const defaultFilterCache = {
  curDepartment: {},
  deviceTypeId: null
};
export default {
  directives: {
    TransferDom
  },
  components: {
    // MeScroll,
    Tab,
    TabItem,
    Sticky,
    XDialog,
    XButton,
    loading,
    myHeader,
    depTree,
    listCard,
    // replaceListCard,
    replaceList,
    Application,
    checkFilter,
    Confirm,
    XTextarea,
    ChartList,
    selectPerson
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      childPageNum: 1,
      childPageSize: 10,
      recordLoading: false,
      stopStep: false,
      stopStepDialog: false,
      stopStepShowTree: false,
      stopStepShowTreeDepartment: {},
      show_chart_empty: false,
      isdestory: false,
      index: 0,
      isOpen: false,
      popupShow: false,
      showMore: false,
      popupContent: "",
      height: "",
      spotCheckMonth: [],
      spotCheckFinishedCount: [],
      spotOverdueCount: [],
      workSheetCount: [],
      replaceRecordMonth: [],
      dateArr: [],
      chartList: [],
      chart: null,
      handledCount: null,
      overDueCount: null,
      processingCount: null,
      waitcount: null,
      replacehandledCount: null,
      replaceProcessingCount: null,
      overdueHandleDialog: false,
      userActionMap: {},
      sportExecutedNum: 0, //
      url: "",
      curDepartment: {
        id: "",
        departmentName: ""
      },
      stopStepForm: {
        departmentId: "",
        startTime: "",
        endTime: "",
        submitter: 0,
        remark: ""
      },
      overdueHandleForm: {
        overdueDisposeReson: "",
        overdueDisposeUserId: "",
        overdueLeaderUserId: "",
        overdueDisposeDesc: "",
        isWorkSheet: null,
        checkRecordIds: []
      },
      departmentId: "",
      showOverdueIndex: undefined,
      dataList: [], // 列表数据，
      dataList1: [], // 列表数据，
      dataList2: [], // 列表数据，
      dataList3: [], // 列表数据，
      dataList1total: 0,
      dataList2total: 0,
      dataList3total: 0,
      personList: [],
      reasonList: ["漏检未检", "请假调休", "停车检修", "维修未检", "其它原因"],
      backupsDataList: [],
      source: {
        client: {}
      },
      isbound: false,
      isHidden: false,
      childIsHidden: false,
      showEmpty: false,
      userId: "",
      reload: false,
      isLastLevel: false,
      recordData: [],
      departmentData: [],
      showTree: false,
      tabBoxHeight: 0,
      headerHeight: 0,
      batchTag: 0,
      checkSecondTabIndex: 1,
      replaceSecondTabIndex: 0,
      isEquals: false,
      showRefresh: false,
      filterObj: {},
      showFilterDialog: false,
      isRefreshCheckComponent: false,
      isRefreshSelectComponent: false,
      showTurn: false,
      hadInput: false,
      filterCondition: defaultFilterCondition,
      filterCache: defaultFilterCache,
      isFilterBackHome: false,
      hadDown: false,
      isDisableTab: true
    };
  },
  mixins:[Privilege],
  computed: {
    user() {
      return this.$store.state.user;
    },
    tableData() {
      return this[`dataList${this.checkSecondTabIndex}`];
    },
    spotCheckNum1() {
      let num = 0;
      if (!this.isLastLevel) {
        this.dataList1.forEach(e => {
          num +=
            e.deviceRecordTotalNum +
            e.componentRecordTotalNum -
            e.deviceRecordDoneNum -
            e.componentRecordDoneNum;
        });
      } else {
        num = this.dataList1total;
      }
      return num ? num : 0;
    },
    spotCheckNum2() {
      let num = 0;
      if (!this.isLastLevel) {
        this.dataList2.forEach(e => {
          num += e.deviceRecordDoneNum + e.componentRecordDoneNum;
        });
      } else {
        num = this.dataList2total;
      }
      return num ? num : 0;
    },
    spotCheckNum3() {
      let num = 0;
      if (!this.isLastLevel) {
        this.dataList3.forEach(e => {
          num += e.componentOverdueNum;
          num += e.deviceOverdueNum;
        });
      } else {
        num = this.dataList3total;
      }
      return num ? num : 0;
    }
  },
  created: function() {
    // console.log(this.index);
    _this = this;
    let localUrl = location.href.split("#")[0];
    this.$http(
      this.$API.getWxSign,
      { url: encodeURIComponent(localUrl) },
      true,
      false,
      true
    ).then(res => {
      if (res) {
        wx.config({
          debug: false,
          appId: res.appId, // 必填,公众号的唯一标识
          timestamp: res.timestamp, // 必填,生成签名的时间戳
          nonceStr: res.nonceStr, // 必填,生成签名的随机串
          signature: res.signature, // 必填,签名
          jsApiList: ["scanQRCode"] // 必填,需要使用的JS接口列表
        });
        /* 处理失败验证 */
        wx.error(function(res) {
          console.log("res:====>", res);
          // config 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
        });
      }
    });

    if (this.$route.query.departmentId) {
      this.curDepartment.id = this.$route.query.departmentId
    }
    this.getDomin();
  },

  activated() {
    // console.log(this.$vux);
    this.init();
  },
  // beforeRouteLeave(to, from, next) {
  //   this.clearHostory();
  //   next();
  // },
  mounted() {
    
    window.addEventListener("popstate", this.backToDep, false);

    this.$nextTick(e=>{
      this.index = +this.$route.query.index || 0
    })
  },
  beforeDestroy() {
    window.removeEventListener("popstate", this.backToDep, false);
  },
  methods: {
    //传入url参数名获取参数值
    init() {
      if (!this.user) {
        this.getUser();
      } else {
        this.getListData();
      }
    },
    backToDep() {
      this.$nextTick(e => {
        let node = this.$refs.depTree.treeFind(
          [this.user.serviceAreaTree],
          e => e.id === this.curDepartment.id
        );
        let parent = this.$refs.depTree.treeFind(
          [this.user.serviceAreaTree],
          e => e.id === node.parentId
        );
        if (parent) {
          this.$refs.depTree.change(parent.id, parent.departmentName);
        }
      });
    },
    getUser() {
      this.$http(this.$API.getUserInfo, {})
        .then(res => {
          if (res) {
            this.$store.commit("saveUser", res);
            this.init();
          }
        })
        .catch(e => {});
    },
    getChartConfig() {
      let params = {
        code: "DXJ01",
        departmentId: this.curDepartment.id
      };
      DataAnalysisDao.getChartConfig(params, res => {
        this.chartList.splice(0);
        if (res && res.length) {
          this.chartList = res.map(e => {
            e.show = 0;
            e.code = "DXJ01";
            return e;
          });
        }
      });
    },
    getListData() {
      this.childPageNum = 1;
      this.filterCache = JSON.parse(localStorage.getItem("filterCache"));
      if (!this.filterCache) {
        this.filterCache = defaultFilterCache;
        localStorage.setItem("filterCache", JSON.stringify(this.filterCache));
      }
      if (!this.curDepartment.id) {
        this.userId = this.user.id;
        this.curDepartment.id = this.user.serviceAreaTree.id;
        this.curDepartment.departmentName = this.user.serviceAreaTree.departmentName;
      }
      
      // this.getChartConfig();
      this.getRecordsData();
      // this.upCallback(1);
      // this.upCallback(2);
      this.upCallback(3);
    },
    changeIsRefreshCheckComponent() {
      this.isRefreshCheckComponent = false;
    },
    changeIsRefreshSelectComponent() {
      this.isRefreshSelectComponent = false;
    },
    closeTurnFn() {
      this.showTurn = false;
    },
    getIsFilterBackHome(status) {
      this.isFilterBackHome = status;
    },
    againResetMeScrollChild() {
      this.resetMeScrollChild();
    },
    changeFilterCondition(obj) {
      this.filterCondition = obj;
    },
    initHadInput(status) {
      this.hadInput = status;
    },
    initCurDepartment(id, departmentName) {
      let filterCache = Common.getFilterCache();
      this.curDepartment = {
        departmentName,
        id
      };
      if (!filterCache.curDepartment.id) {
        filterCache.curDepartment = this.curDepartment;
        Common.saveFilterObj(filterCache);
      }
    },
    goFilter() {
      this.showFilterDialog = true;
      this.isRefreshCheckComponent = true;
      this.$refs.checkFilter.setDefaultValue();
    },
    back() {
      if (this.showFilterDialog) {
        this.coloseFilterDialog();
        this.changeIsRefreshSelectComponent();
      } else {
        this.closeTurnFn();
        this.changeIsRefreshSelectComponent();
      }
    },
    coloseFilterDialog() {
      this.showFilterDialog = false;
      this.hadInput = false;
    },
    showTreeFn(status) {
      // console.log(status)
      if (status) {
        this.$refs.selece_icon.$el.style.transform = "rotate(-180deg)";
      } else {
        this.$refs.selece_icon.$el.style.transform = "rotate(0deg)";
      }
      this.showTree = status;
    },
    change(id, departmentName) {
      this.curDepartment.id = id;
      this.departmentId = id;
      this.curDepartment.departmentName = departmentName;
      let query = JSON.parse(JSON.stringify(this.$route.query));
      query.departmentId = id;
      this.$router.push({ path: this.$route.path, query: query });
      let filterCache = JSON.parse(localStorage.getItem("filterCache"));
      filterCache.curDepartment = this.curDepartment;
      localStorage.setItem("filterCache", JSON.stringify(filterCache));

      this.getRecordsData();
      // this.getChartConfig();

      let node = this.$refs.depTree.treeFind(
        this.user.serviceAreaTree.children,
        e => e.id === id
      );

      this.isLastLevel = node && !node.children.length;
      this.showOverdueIndex = undefined;

      this.upCallback(1);
    },
    handleTouchstart(e) {
      // 开始拖拽
      this.isbound = true;
      this.isHidden = true;
      console.log(document.getElementsByTagName("body")[0]);
      let eleBody = document.getElementsByTagName("body")[0];
      eleBody.style.position = "fixed";
      eleBody.style.width = "100vw";
      eleBody.style.height = "100vh";
      eleBody.style.top = 0;
      eleBody.style.left = 0;
    },
    move(e) {
      let odiv = e.targetTouches[0]; //获取目标元素
      e.preventDefault();
      //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
      let top = odiv.clientY - odiv.target.offsetHeight / 2;
      let h = document.body.clientHeight;
      let offsetBottom = h - odiv.clientY - odiv.target.offsetHeight / 2;
      if (top <= 47) {
        top = 47;
      } else if (offsetBottom <= 98) {
        return;
      }

      //移动当前元素
      e.target.style.right = 16 + "px";
      e.target.style.top = top + "px";
    },
    handleTouchend(e) {
      // 拖拽结束
      e.target.style.right = 16 + "px";
      this.isbound = false;
      this.isHidden = false;
      let eleBody = document.getElementsByTagName("body")[0];
      eleBody.style.position = "static";
      eleBody.style.width = "auto";
      eleBody.style.height = "auto";
      eleBody.style.top = "unset";
      eleBody.style.left = "unset";
    },
    maskTouchMove(e) {
      console.log(e);
      e.preventDefault();
    },
    spotCheckView(index) {
      if (!this.isDisableTab) {
        return;
      }
      this.showMore = false;
      this.isDisableTab = false;
      this.checkSecondTabIndex = index;
      this.showOverdueIndex = undefined;
      this.resetMeScrollChild();
    },
    switchFn(index) {
      // 显示刷新
      this.showEmpty = false;
      
      this.index = index;

      // 重置筛选条件
      if (!isEmptyObject(this.filterCondition)) {
        // 清空筛选条件
        this.filterCondition = defaultFilterCondition;
      }
      this.changeIsRefreshCheckComponent(); // 同时也要刷新一下筛选组件，清空条件
      this.changeIsRefreshSelectComponent(); // 同时也要刷新一下选择转办人组件，清空条件

      // 重置列表数据及页码
      this.resetMeScrollChild();
      this.showRefresh = true;
      if (!this.isOpen) {
        // this.mescroll.scrollTo(this.height + 2, 0);
      }
    },
    resetMeScrollChild() {
      // 重置列表数据及页码
      // this.mescrollChildUp.page.num = 0
      this.pageNum = 1;
      this.childPageNum = 1;
      this.dataList = [];
      this.showMore = false;
      this.upCallback();
    },
    toggleFn() {
      this.isOpen = !this.isOpen;
    },
    scrollFn(mescroll, y, isUp) {},
    getRecordsByUser(obj, index) {
      if (!this.hadDown) {
        this.showRefresh = true;
      }
      this.showEmpty = false; //重置空状态

      let filterCache = Common.getFilterCache();
      SpotCheckDao.getToDoCheckList(
        {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          departmentId: filterCache
            ? filterCache.curDepartment.id
            : this.departmentId,
          deviceId: null,
          deviceTypeId: obj.deviceTypeId != -1 ? obj.deviceTypeId : null,
          viewType: this.checkSecondTabIndex > 0 ? this.checkSecondTabIndex : 1
        },
        res => {
          this.eventDataList(res);
        }
      );
    },
    getDepartmentDetailsList(departmentId, tabIndex) {
      this.$vux.loading.show({
        text: "Loading"
      });
      SpotCheckDao.getDepartmentDetailsList(
        {
          pageNum: this.childPageNum,
          pageSize: this.childPageSize,
          departmentId,
          viewType: tabIndex
        },
        res => {
          this.$vux.loading.hide();
          if (res) {
            if (this.isLastLevel) {
              this.isDisableTab = true;
              if (this.childPageNum === 1) {
                this[`dataList${tabIndex}`].splice(
                  0,
                  this[`dataList${tabIndex}`].length
                );
              }
              if (res.content && res.content.length) {
                this[`dataList${tabIndex}`].push(...res.content);
              }
              this.showMore = !(
                !res.totalPages || this.childPageNum === res.totalPages
              );
              this[`dataList${tabIndex}total`] = res.totalElements;
              if (this[`dataList${tabIndex}`].length == 0) {
                this.showEmpty = true;
              } else {
                this.showEmpty = false;
              }
              this.showRefresh = false;
              this.reload = false;
            } else {
              if (
                !this[`dataList${tabIndex}`][this.showOverdueIndex].undoList ||
                this.childPageNum === 1
              ) {
                this.$set(
                  this[`dataList${tabIndex}`][this.showOverdueIndex],
                  "undoList",
                  res.content
                );
              } else {
                this[`dataList${tabIndex}`][
                  this.showOverdueIndex
                ].undoList.push(...res.content);
              }
              this.$set(
                this[`dataList${tabIndex}`][this.showOverdueIndex],
                "showMore",
                !(!res.totalPages || this.childPageNum === res.totalPages)
              );
            }
          } else {
            this.showRefresh = true;
            this.reload = true;
          }
        }
      );
    },
    getDepartmentViewList(tabIndex) {
      if (this.isLastLevel) {
        this.getDepartmentDetailsList(this.curDepartment.id, tabIndex);
        return;
      }
      if (!this.hadDown) {
        this.showRefresh = true;
      }
      this.showEmpty = false; //重置空状态
      SpotCheckDao.getDepartmentViewList(
        {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          departmentId: this.curDepartment.id,
          viewType: tabIndex
        },
        res => {
          this.eventDataList(res, tabIndex);
        }
      );
    },
    eventDataList(res, tabIndex = 1) {
      if (res) {
        this.isDisableTab = true;
        if (this.pageNum === 1) {
          this[`dataList${tabIndex}`].splice(
            0,
            this[`dataList${tabIndex}`].length
          );
        }
        this[`dataList${tabIndex}`] = this[`dataList${tabIndex}`].concat(res);
        this.showMore = false;

        if (this[`dataList${tabIndex}`].length == 0) {
          this.showEmpty = true;
        } else {
          this.showEmpty = false;
        }
        this.showRefresh = false;
        this.reload = false;
      } else {
        this.showRefresh = true;
        this.reload = true;
      }
    },
    getProcessingByUser(obj, index) {},
    getMore() {
      this.pageNum++;
      this.childPageNum++;
      this.upCallback();
    },
    upCallback(tag = false) {
      if (!this.index) {
        if (tag) {
          this.getDepartmentViewList(1);
          this.getDepartmentViewList(2);
          this.getDepartmentViewList(3);
        } else {
          this.getDepartmentViewList(this.checkSecondTabIndex);
        }
      } else {
        // 更换记录
        // this.getReplaceTaskRecordDepartment();
      }
    },
    getDomin() {
      this.url = window.location.protocol + "//" + window.location.host;
    },
    // 统计最近七天处理的数量
    getRecordsData() {
      SpotCheckDao.checkTaskRecord(this.curDepartment.id, data => {
        this.recordData.splice(0, this.recordData.length);
        this.recordData = data;
        this.drawLine(this.recordData);
      });
    },
    formatRecordDataDataset(data) {
      let dataset = [],
        xAxis = [],
        yAxis = [];
      if (data && data.length) {
        xAxis.push("product", "已执行", "逾期", "逾期已处理");
        data.forEach((e, i) => {
          yAxis.push([e.departmentName]);
          e.dataList.forEach((ele, index) => {
            yAxis[i].push(ele.statusCount);
          });
        });
        dataset.push(xAxis, ...yAxis);
        return dataset;
      } else {
        return [];
      }
    },
    formatRecordDataSeries(data) {
      let series = [];
      if (data && data.length) {
        series = data.map(() => {
          return {
            type: "bar"
          };
        });
      }
      // console.log(series, "series");
      return series;
    },
    drawLine(data) {
      if (!this.chart) {
        let option = {
          color: ["#F94B48", "#F9D64A", "#54CA75", "#456DE5"],
          grid: {
            containLabel: true,
            top: "8%",
            bottom: "18%",
            left: "4%",
            right: "4%"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "line",
              lineStyle: {
                color: "#979797"
              }
            },
            textStyle: {
              align: "left"
            }
          },
          legend: { bottom: "4%", textStyle: { color: "#fff" } },
          textStyle: {
            color: "#959595"
          },
          xAxis: {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#979797"
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            type: "value",
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: "#979797",
                type: "dotted"
              }
            }
          },
          series: [
            {
              type: "bar",
              itemStyle: { color: "#456DE5" }
            },
            {
              type: "bar",
              itemStyle: { color: "#DC9610" }
            },
            {
              type: "bar",
              itemStyle: { color: "#DD6031" }
            }
          ]
        };

        this.chart = this.$echarts.init(this.$refs.chart);
        this.chart.setOption(option);
      }
      let source = this.formatRecordDataDataset(data);
      this.chart.setOption({
        dataset: {
          source
        }
      });
      let option = this.chart.getOption();
      if (!source.length) {
        option.graphic = [
          {
            type: "text",
            left: "center",
            top: "40%",
            style: {
              text: "暂无数据",
              fill: "#fff",
              fontSize: 18
            }
          }
        ];
        this.chart.setOption(option, true);
      } else {
        option.graphic = [];
        this.chart.setOption(option, true);
      }
    },
    //扫码添加
    scanAdd: function() {
      // console.log("进入扫码接口")
      let strUrl = "";
      wx.ready(() => {
        wx.scanQRCode({
          // 微信扫一扫接口
          desc: "scanQRCode desc",
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: function(res) {
            //扫码之后返回设备信息，获取设备id，跳转对应页面
            strUrl = res.resultStr;
            if (strUrl.indexOf("scanLoginType") != -1) {
              window.location.href = strUrl;
            } else {
              let name = "state";
              let reg = new RegExp("(^|&)" + name + "=([^&]*)(#|$)", "i");
              let r = strUrl.substr(1).match(reg);
              let id = "";
              if (r != null) {
                id = r[2].split("#")[0];
              }
              if (strUrl.indexOf(location.hostname) != -1) {
                window.location.href =
                  _this.url +
                  "/#/operaionManage/spotCheck/componentCheck?deviceId=" +
                  id;
              } else {
                this.$commom.alert("请输入正确的手机号码");
              }
            }
          }
        });
      }).catch(err => {
        console.log("err:===>", err);
      });
    },
    selectTime(index) {
      let _this = this;
      let now = dayjs();
      this.$vux.datetime.show({
        cancelText: "取消",
        confirmText: "确定",
        format: "YYYY-MM-DD HH:mm",
        startDate: now.format("YYYY-MM-DD"),
        onConfirm(value) {
          if (!index) {
            _this.stopStepForm.startTime = dayjs(value);
          } else {
            _this.stopStepForm.endTime = dayjs(value);
          }
        },
        onHide(type) {
          if (type === "cancel") {
            // that.banci = value
          }
        }
      });
    },
    eventStopStepShow() {
      this.stopStepShowTreeDepartment = JSON.parse(
        JSON.stringify(this.curDepartment)
      );
      this.stopStepDialog = true;
    },
    stopStepDepChange(id, departmentName) {
      this.stopStepShowTreeDepartment = {
        departmentName,
        id
      };
    },
    stopStepDepShowTreeFn(status) {
      // console.log(status)
      if (status) {
        this.$refs.selece_icon.$el.style.transform = "rotate(-180deg)";
      } else {
        this.$refs.selece_icon.$el.style.transform = "rotate(0deg)";
      }
      this.stopStepShowTree = status;
    },
    handleStopStep(tag) {
      if (!tag) {
        this.stopStepFormInit();
        return;
      }
      let errMsg = "";
      if (!this.stopStepShowTreeDepartment.id) {
        errMsg = "请选择部门";
      } else if (!this.stopStepForm.startTime || !this.stopStepForm.endTime) {
        errMsg = "请选择停车时间";
      } else if (
        this.stopStepForm.endTime.isBefore(this.stopStepForm.startTime)
      ) {
        errMsg = "结束时间请大于开始时间";
      } else if (this.stopStepForm.startTime.isBefore(dayjs())) {
        errMsg = "开始时间请大于现在的时间";
      } else if (!this.stopStepForm.remark) {
        errMsg = "请输入停车原因描述";
      }
      if (errMsg) {
        this.$vux.toast.show({ text: errMsg, type: "warn" });
        return;
      }

      this.stopStepForm.departmentId = this.stopStepShowTreeDepartment.id;
      this.stopStepForm.submitter = this.user.id;
      SpotCheckDao.postParkPlanSubmit(this.stopStepForm, data => {
        this.$vux.toast.show({
          text: "提交成功",
          type: "success"
        });
        this.stopStepFormInit();
        this.upCallback();
      });
    },
    stopStepFormInit() {
      this.stopStepForm.departmentId = "";
      this.stopStepForm.startTime = "";
      this.stopStepForm.endTime = "";
      this.stopStepForm.remark = "";
      this.stopStepDialog = false;
    },
    eventOpenNext(item) {
      history.pushState(null, null, location.hash);
      this.$refs.depTree.change(item.departmentId, item.departmentName);
    },
    eventPageNext(item) {
      this.childPageNum++;
      // console.log(this.childPageNum);
      this.getDepartmentDetailsList(
        item.departmentId,
        this.checkSecondTabIndex
      );
    },
    eventChangeOverdueIndex(index) {
      this.childPageNum = 1;
      if (this.showOverdueIndex !== index) {
        this.getDepartmentDetailsList(
          this[`dataList${this.checkSecondTabIndex}`][index].departmentId,
          this.checkSecondTabIndex
        );
      }
      this.showOverdueIndex = index;
    },
    eventOverdueHandle(arr, tag) {
      this.batchTag = tag;
      this.overdueHandleForm.checkRecordIds.splice(
        0,
        this.overdueHandleForm.checkRecordIds.length
      );
      this.overdueHandleForm.checkRecordIds = arr.map(e => e.id);

      SpotCheckDao.getOverdueDisposePerson(
        { checkRecordIds: this.overdueHandleForm.checkRecordIds },
        data => {
          this.personList.splice(0, this.personList.length);
          let ids = [];
          data.forEach(element => {
            if (element && element.id) {
              if (!ids.includes(element.id)) {
                this.personList.push(element);
                ids.push(element.id);
              }
            }
          });
        }
      );
      this.overdueHandleDialog = true;
    },
    handleOverdueHandle(tag) {
      if (!tag) {
        this.overdueHandleFormInit();
        return;
      }
      let errMsg = "";
      if (!this.overdueHandleForm.overdueDisposeReson) {
        errMsg = "请选择逾期原因";
      } else if (!this.overdueHandleForm.overdueDisposeDesc) {
        errMsg = "请输入处理结果描述";
      } else if (
        this.overdueHandleForm.isWorkSheet &&
        !this.overdueHandleForm.overdueLeaderUserId
      ) {
        errMsg = "生成工单时请选择责任人";
      }
      if (errMsg) {
        this.$vux.toast.show({ text: errMsg, type: "warn" });
        return;
      }
      this.overdueHandleForm.overdueDisposeUserId = this.$store.state.user.id;
      if (this.overdueHandleForm.checkRecordIds.length > 1) {
        this.overdueHandleForm.departmentId = this.curDepartment.id;
        SpotCheckDao.postOverdueDisposeByDepartment(
          this.overdueHandleForm,
          data => {
            this.$vux.toast.show({
              text: this.overdueHandleForm.isWorkSheet
                ? "提交成功，已生成工单"
                : "提交成功",
              type: "success"
            });
            this.overdueHandleFormInit();
            if (this.isLastLevel) {
              this.upCallback();
            } else {
              this.getDepartmentDetailsList(
                this[`dataList${this.checkSecondTabIndex}`][
                  this.showOverdueIndex
                ].departmentId,
                this.checkSecondTabIndex
              );
            }
          }
        );
      } else {
        SpotCheckDao.postOverdueDispose(this.overdueHandleForm, data => {
          this.$vux.toast.show({
            text: this.overdueHandleForm.isWorkSheet
              ? "提交成功，已生成工单"
              : "提交成功",
            type: "success"
          });
          this.overdueHandleFormInit();
          if (this.isLastLevel) {
            this.upCallback();
          } else {
            this.getDepartmentDetailsList(
              this[`dataList${this.checkSecondTabIndex}`][this.showOverdueIndex]
                .departmentId,
              this.checkSecondTabIndex
            );
          }
        });
      }
    },
    overdueHandleFormInit() {
      this.overdueHandleForm.overdueDisposeDesc = "";
      this.overdueHandleForm.overdueDisposeReson = "";
      this.overdueHandleForm.overdueDisposeUserId = "";
      this.overdueHandleForm.overdueLeaderUserId = "";
      this.overdueHandleForm.isWorkSheet = null;
      this.overdueHandleDialog = false;
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  background-color: #22233f;
  height: auto;
  min-height: 100vh;
  padding-bottom: 16px;
  // overflow: hidden;
  .my_dialog {
    position: fixed;
    width: 100%;
    left: 0;
    z-index: 4999;
  }
  .ewm {
    position: fixed;
    right: 16px;
    bottom: 116px;
    width: 48px;
    height: 48px;
    outline: none;
    border: none;
    border-radius: 50%;
    background: rgba(69, 109, 230, 0.4);
    color: #fff;
    font-size: 10px;
    line-height: 46px;
    text-align: center;
    user-select: none;
    z-index: 9999;
    padding: 0;
    &:active {
      background: rgba(69, 109, 230, 0.6);
    }
  }
  // .mescrollChild {
  // position: absolute;
  // bottom: 0;
  // }
  .mescrollParent {
    // position: fixed;
    // top: 46px;
    // bottom: 0;
    // overflow: hidden;
    height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
    padding: 0 16px;
    .newpage_work_more {
      height: 40px;
      font-size: 12px;
      line-height: 40px;
      text-align: center;
      color: #456de6;
    }
    .pause-btn {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 8px;
      .btn {
        // width: 100px;
        color: #fff;
        font-size: 14px;
        background-color: #dd9710;
        padding: 2px 16px 4px;
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }
  .body-wrapper {
    .fixed_dep_box {
      // position: fixed;
      // top: 46px;
      // width: 100%;
      // z-index: 8;
      padding: 16px 0 8px;
      background: #22233f;
      .btn_box {
        display: flex;
        padding: 0 16px;
        justify-content: space-between;
        position: relative;
        height: 28px;
        .department_select {
          position: relative;
          width: 220px;
          border-radius: 2px;
          background: #292a4d;
          transition: background 0.3s ease-in-out;
          &.active {
            background: #383a69;
          }
          .department_name {
            padding: 5px 9px;
            padding-right: 30px;
            color: #fff;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .selece_icon {
            position: absolute;
            top: 50%;
            right: 8px;
            margin-top: -6px;
            transition: transform 0.3s ease-in-out;
            transform-origin: 50% 50%;
          }
        }
        .dep_box {
          position: absolute;
          left: 16px;
          right: 16px;
          bottom: -255px;
          padding-right: 16px;
          background: rgba(255, 255, 255, 0.9);
          border-radius: 4px;
          height: 250px;
          overflow-y: scroll;
          z-index: 9999999;
          -webkit-overflow-scrolling: touch;
        }
        .toggle {
          outline: none;
          border: none;
          background: inherit;
          font-size: 14px;
          color: #fff;
          .btn_icon {
            margin-top: -5px;
          }
        }
      }
    }
    .chart {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: auto;
      #myChart {
        width: 100vw;
        height: 350px;
      }
      .loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .chart_empty {
        position: absolute;
        display: block;
        width: 84px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -70%);
        img {
          width: 100%;
        }
        p {
          text-align: center;
          color: #9ec6fb;
          font-size: 13px;
        }
      }
      .chart_empty {
        position: absolute;
        display: block;
        width: 84px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -70%);
        img {
          width: 100%;
        }
        p {
          text-align: center;
          color: #9ec6fb;
          font-size: 13px;
        }
      }
    }

    .tab_box {
      background-color: #22233f;
      .tab_top_nav {
        position: relative;
        .setIcon {
          position: absolute;
          top: 50%;
          right: 16px;
          transform: translate(0, -50%);
          color: #d2d3d8;
        }
      }
      .tab-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 12px 0;
        .tab-nav-item {
          flex: 1;
          color: #456de6;
          font-size: 14px;
          padding: 6px 0 8px;
          text-align: center;
          margin: 0 6px;
          border-radius: 4px;
          border: 1px solid #456de6;
          display: flex;
          flex-direction: column;
          &.overdue {
            color: #f5a623;
            border: 1px solid #f5a623;
          }
          &.active {
            color: #fff;
            background: #456de6;
            border: 1px solid #456de6;
            &.overdue {
              color: #fff;
              background: #f5a623;
              border: 1px solid #f5a623;
            }
          }
        }
      }
      .menu_tab_box {
        padding: 0 10px 16px;
        ul {
          margin-top: 12px;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          height: 44px;
          li {
            flex: 1;
            margin: 0 6px;
            height: 44px;
            padding: 0 9px 3px;
            background: #22233f;
            border-radius: 4px;
            color: #456de6;
            text-align: center;
            border: 1px solid rgba(69, 112, 198, 1);
            &.active {
              background: rgba(69, 109, 230, 0.8);
              color: #fff;
            }
            &.overdueActive {
              background: #f2a309;
              border: 1px solid #f2a309;
              .value {
                color: #fff !important;
              }
              .label {
                color: #fff !important;
              }
            }
            .text {
            }
            .label {
              width: 200%;
              font-size: 20px;
              transform: scale(0.5) translate(-50%, 0);
              margin-top: -7px;
            }
            .value {
              /* margin-top: -8px; */
              font-size: 17px;
              height: 24px;
            }
          }
        }
      }
    }
    .tab_list_box {
      padding: 0 16px;
      .list_content {
        ul {
          overflow: hidden;
        }
      }
    }
  }

  .MoreDataP {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transition: transform 0.3s ease-in-out;
    // transform: translateY(-120%);
    background: #22233f;
    input {
      &::placeholder {
        color: gray !important;
      }
    }
    .nav-center {
      font-size: 16px;
      color: #fff;
      line-height: 44px;
      text-align: center;
    }
    .MoreDataPInner {
      width: 100%;
      color: #ffffff;
      background: #22233f;
    }
    // &.show {
    //   transform: translateY(0);
    // }
    // &.hide {
    //   transform: translateY(-120%);
    // }
    .searchItem {
      padding: 0 16px 16px;
      // &.addP {
      //   padding-bottom: calc(~"100vh - 400px") !important;
      // }
      .title {
        font-size: 16px;
        margin: 8px 0;
      }
      .inner {
        input[type="text"] {
          height: 30px;
          line-height: 30px;
          font-size: 16px;
          background: #292a4d;
          width: 100%;
          margin-bottom: 12px;
          color: #fff;
          padding: 0 8px;
          transition: background 0.3s ease-in-out;
          &:focus {
            background: #383a69;
          }
          &::placeholder {
            line-height: 30px;
          }
        }
      }
    }
  }
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter,
.slide-leave-to {
  transform: translateY(-800px);
  opacity: 0;
}
</style>
<style lang="less">
.container {
  .tab_box {
    .vux-fixed {
      background-color: #22233f;
      top: 94px !important;
      z-index: 99999;
    }
    .vux-tab-wrap {
      width: 45%;
      position: relative !important;
      padding-top: 30px;
      margin: 8px auto 0;
      .vux-tab-container {
        height: 30px;
        z-index: 0 !important;
        .vux-tab {
          height: 30px;
          background-color: transparent;
          .vux-tab-item {
            font-size: 18px;
            line-height: 30px;
            background: transparent;
            // &.vux-tab-selected {
            //   font-size: 18px;
            // }
          }
        }
        .vux-tab-no-animate {
          .vux-tab-selected {
            position: relative;
            border-bottom: none;
            &:after {
              position: absolute;
              content: "";
              width: 20px;
              height: 3px;
              background: #456de6;
              left: 50%;
              bottom: 0;
              transform: translate(-50%, 0);
            }
          }
        }
      }
    }
    .menu_tab_box {
      ul {
        li {
          .value {
            .vux-spinner {
              stroke: #fff;
            }
          }
        }
      }
    }
  }
  .tab_list_box {
    .mescroll-empty {
      padding-top: 50px;
      .empty-icon {
        width: 64px;
        height: 64px;
        margin-left: 22px;
      }
      .empty-tip {
        color: #4f77c0;
      }
    }
    .refresh-warp {
      .refresh-progress {
        border-width: 2px;
      }
    }
  }
}

.overdue-handle-confirm,
.stopstep-handle-confirm {
  color: #303133;
  .weui-cell {
    padding: 0;
  }
  .weui-dialog {
    width: 90%;
    max-width: 9rem;
    overflow: visible;
  }
  .weui-dialog__hd {
    padding: 1.3em 1em 0.5em;
  }
  .weui-dialog__bd {
    padding: 0 1em 0.8em;
  }

  .MoreDataPInner {
    width: 100%;
    color: #ffffff;
    background: #22233f;
  }

  .searchItem {
    .title {
      display: flex;
      align-items: center;
    }
    .curSelectItem {
      width: 100%;
      flex: 1;
      .department_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        color: #303133;
        .department_select {
          position: relative;
          width: 100%;
          border-radius: 2px;
          // background: #292a4d;
          // transition: background 0.3s ease-in-out;

          // &.active {
          //   background: #383a69;
          // }
          .department_name {
            padding: 5px 9px;
            padding-right: 30px;
            // color: #fff;
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .selece_icon {
            position: absolute;
            top: 50%;
            right: 8px;
            margin-top: -6px;
            transition: transform 0.3s ease-in-out;
            transform-origin: 50% 50%;
          }
        }
        .dep_box {
          position: absolute;
          left: 16px;
          right: 16px;
          bottom: -255px;
          padding-right: 16px;
          color: #000;
          background: rgba(255, 255, 255, 0.9);
          border-radius: 4px;
          height: 250px;
          overflow-y: scroll;
          z-index: 9999999;
          -webkit-overflow-scrolling: touch;
        }
      }
    }
    .inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 8px;
      > span {
        width: 78px;
        text-align: right;
        color: #333;
        // flex: none;
      }
      .textarea {
        width: 100%;
        flex: none;
        border: 1px solid #eee;
        border-radius: 4px;
        textarea {
          width: 94%;
          color: #22233f;
          padding: 8px;
          font-size: 14px;
        }
      }
    }
    .time {
      display: flex;
      align-items: center;
      font-size: 16px;
      flex: 1;
      color: #303133;
      // background: #292a4d;
      .time-text {
        width: 20px;
        padding: 0 3px;
        text-align: center;
      }
      .time-span {
        flex: 1;
        padding: 2px 0;
        font-size: 12px;
        text-align: center;
        border-bottom: 1px solid #dedede;
      }
    }
  }
  .iu-select {
    height: 24px;
    width: 60%;
    padding: 2px 4px;
    border: none;
    outline: none;
    border: 1px solid #eee;
    border-radius: 2px;
    font-size: 14px;
    color: #22233f;
    background: transparent;
    &:invalid {
      color: #999;
    }
    option {
      background: rgba(255, 255, 255, 0.9);
    }
  }
}
.overdue-handle-confirm {
  .inner {
    > span {
      width: 85px !important;
    }
  }
}
</style>
